<template>
  <a-modal title="新增" :visible="visible" ok-text="确定" @ok="handleSubmit" @cancel="handleCancel">
    <a-form-model ref="form" :model="queryParam" :rules="validatorRules">
      <a-form-model-item label="考核名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="checkName">
        <a-input placeholder="请输入考核名称" v-model="queryParam.checkName"></a-input>
      </a-form-model-item>
      <a-form-model-item label="考核类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="checkType">
        <j-dict-select-tag
          style="width: 100%"
          v-model="queryParam.checkType"
          placeholder="请选择"
          dict-code="inconplantype"
        />
      </a-form-model-item>
      <a-form-model-item label="年份" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="checkYear">
        <a-date-picker
          mode="year"
          placeholder="请选择年份"
          format="YYYY"
          value-format="yyyy-MM-dd"
          v-model="queryParam.checkYear"
          :open="yearPickShow"
          style="width: 100%"
          @panelChange="handlePanelChange"
          @openChange="handleOpenChange"
        />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
export default {
  name: 'UserModal',
  components: {},
  data() {
    return {
      queryParam: {
        checkYear: '',
        checkType: '',
        checkName: '',
      },
      yearPickShow: false,
      visible: false,
      validatorRules: {
        checkName: [{ required: true, message: '请输入考核名称' }],
        checkYear: [{ required: true, message: '请选择年份' }],
        checkType: [{ required: true, message: '请选择考核类型' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      approverList: '',
      url: {
        getApprover: '/sys/user/queryAuditInfoByOrgCode',
      },
    }
  },
  created() {
    getAction(this.url.getApprover)
      .then((res) => {
        //获取审核人列表
        if (res.success && res.result) {
          this.approverList = res.result
        } else {
          console.log(res)
        }
      })
      .finally(() => {})
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.visible = false
          this.$emit('openModelView', this.queryParam)
          this.queryParam = {
            checkYear: '',
          }
        } else {
          return false
        }
      })
    },
    handleCancel(e) {
      this.queryParam = {
        checkYear: '',
      }
      this.visible = false
    },
    moment,
    // 得到年份选择器的值
    handlePanelChange(value) {
      this.queryParam.checkYear = moment(value).format('YYYY')
      this.yearPickShow = false
      this.$refs.form.validateField('checkYear', (error) => {
        console.log(error)
      })
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
  },
}
</script>

<style scoped>
</style>
